<template>

    <el-container>
        <el-header>
            <el-breadcrumb>
                <el-breadcrumb-item><span style="color:white">{{ name }}</span></el-breadcrumb-item>
            </el-breadcrumb>
            <span class="tuichu" @click="tuichu">退出登录</span>
        </el-header>
        <el-container class="xia">

            <el-aside id="left" width="200px">
                <el-menu default-active="/home/index" router="true" class="el-menu-vertical-demo">
                    <el-menu-item index="/home/index">
                        <span>首页</span>

                    </el-menu-item>
                    <el-menu-item index="/home/membersManage">
                        <span>会员管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/orderManage">
                        <span>订单管理</span>
                    </el-menu-item>

                    <el-sub-menu index="1">
                        <template #title>
                            <span>商品管理</span>
                        </template>
                        <el-menu-item index="/home/klaeManage">商品管理</el-menu-item>
                        <el-menu-item index="/home/contTen">商品分类</el-menu-item>
                        <el-menu-item index="/home/AddFoods">添加商品</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <span @click="zt">营销管理</span>
                        </template>
                        <el-menu-item index="/home/Special">特价活动</el-menu-item>
                        <el-menu-item index="/home/exchange">爆款兑换</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</template>


<script setup>
import { useRouter } from 'vue-router'
import { onBeforeUpdate, ref } from 'vue'
import storage from '../utils/storage'


let tuichu = () => {
    storage.removeStorage('user')
    router.push({
        path: '/login'

    })


}
const zt = (() => {
    router.push({
        path: '/home/MarkGl'
    })
})

const router = useRouter()
let name = ref('首页')
onBeforeUpdate(() => {
    name.value = router.currentRoute._rawValue.meta.title
    console.log(router.currentRoute._rawValue);
})





</script>

<style scoped>
span {
    display: block;
    font-size: 22px;
    height: 35px;
    line-height: 35px;

}


.xia {

    background-color: rgb(201, 201, 201);
    position: relative;
    left: 50%;
    transform: translate(-50%);
    /* border-radius: 0px 0px 0px 15px; */

}

.el-main {
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 2px solid #ccc;
    height: 100%;




}

.el-container,
.el-menu {
    margin: 0;
    padding: 0;
    height: 100%;
}

.el-header {
    background-color: rgba(0, 0, 0, 0.846);
    height: 80px;
    display: flex;
    align-items: center;

    /* border-radius: 5px; */
    position: relative;
    left: 50%;
    transform: translate(-50%);


}

.el-breadcrumb {
    box-sizing: border-box;
    font-size: 30px;
    ;
    font-weight: border;
    padding-left: 40px;


}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: white;

}

.tuichu {
    position: absolute;
    right: 100px;
    color: white;
}
</style>